<!DOCTYPE HTML>
<html>
<head>
    <title>运动鞋网上专卖店模板</title>
    <link href="/home/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <link href="/home/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <script src="/home/js/jquery.min.js"></script>
    <script type="text/javascript" src="/home/js/easing.js"></script>
    <link rel="stylesheet" href="/home/css/flexslider.css" type="text/css" media="screen" />
    <link href="/home/css/megamenu.css" rel="stylesheet" type="text/css" media="all" />
    <link href="/home/css/form.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="/home/js/megamenu.js"></script>
    <script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
    <script src="/home/js/menu_jquery.js"></script>
    <link rel="stylesheet" href="/home/css/etalage.css">
    <script src="/home/js/jquery.easydropdown.js"></script>
    <script src="/home/js/jquery.etalage.min.js"></script>
    <script>
        jQuery(document).ready(function($){

            $('#etalage').etalage({
                thumb_image_width: 300,
                thumb_image_height: 400,
                source_image_width: 800,
                source_image_height: 1000,
                show_hint: true,
                click_callback: function(image_anchor, instance_id){
                    alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
                }
            });

        });
    </script>

</head>
<body>
<!-- header -->
<div class="header">
    <div class="top_bg">
        <div class="container">
            <div class="header_top">
                <div class="logo">
                    <a href="/home/index/index"><img src="/home/images/logo.png" alt=""/></a>
                </div>
                <div class="top_right">
                    <ul>
                        <li><a href="##">注册账号 </a></li>|
                        <li><a href="##">联系我们</a></li>|

                        @if(session('userid') == '')
                        <li class="login" >
                            <div id="loginContainer"><a href="#" id="loginButton"><span>登录</span></a>
                                <div id="loginBox">
                                    <form id="loginForm" action="/home/user/login" method="post">
                                        {{csrf_field()}}
                                        <fieldset id="body">
                                            <fieldset>
                                                <label for="email">用户名</label>
                                                <input type="text" name="username" id="email">
                                            </fieldset>
                                            <fieldset>
                                                <label for="password">密码</label>
                                                <input type="password" name="password" id="password">
                                            </fieldset>
                                            <input type="submit" id="login" value="登录">
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        </li>
                        @else
                            <li>你好， {{session('username')}}</li>
                            <li><a href="/home/user/logout">退出</a></li>
                        @endif
                    </ul>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
</div>
<div class="head-bann">
    <div class="container">
        <div class="head-nav">
            <span class="menu"> </span>
            <ul class="megamenu skyblue">
                <li><a class="color1" href="/home/index">首页</a></li>
                @foreach($cates as $k => $v)
                <li><a class="color4" href="#">{{$v['name']}}</a>
                    <div class="megapanel">
                        <div class="row">
                            @foreach($v['sub'] as $key => $val)
                            <div class="col1">
                                <div class="h_nav">
                                    <h4>{{$val['name']}}</h4>
                                    <ul>
                                        @if($val['sub'])
                                        @foreach($val['sub'] as $ke => $value)
                                        <li><a href="/home/list/index?cateid={{$value['id']}}">{{$value['name']}}</a></li>
                                        @endforeach
                                        @endif
                                    </ul>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="row">
                            <div class="col2"></div>
                            <div class="col1"></div>
                            <div class="col1"></div>
                            <div class="col1"></div>
                            <div class="col1"></div>
                        </div>
                    </div>
                </li>
                @endforeach
                <div class="clearfix"> </div>
            </ul>
        </div>
    </div>
</div>
<!-- script-for-nav -->
<script>
    $( "span.menu" ).click(function() {
        $( ".head-nav ul" ).slideToggle(300, function() {
            // Animation complete.
        });
    });
</script>
<!-- script-for-nav -->
@section('main')
<div class="banner">
    <div class="container">
        <div class="col-md-6">
        </div>
        <div class="col-md-6 banner-info">
            <h1>Nike React系列跑鞋最新发布</h1>
            <p>1 月 23 日，耐克邀请媒体发布了一双花 3 年时间研发的跑鞋 Nike Epic React Flyknit，定价 1299 元。<br>创新的部分主要在于中底泡棉的材料 “Nike React”，据耐克表示，这种材料兼具了缓震、回弹、轻质、耐久 4 种特性。</p>
            <a class="show-more" href="/home/list/index?cateid=30">立即购买</a>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!-- header -->
<div class="instock">
    <div class="container">
        <div class="col-md-6 chuk">

            <div class="blanc-info">
                <h3>Adidas Ultra Boost 系列</h3>
                <h4>正在热销!<br>最低 ￥500 元起</h4>
                <a class="show" href="/home/list/index?cateid=13">立即购买</a>
            </div>
        </div>
        <div class="col-md-6 blanc">

            <div class="blanc-info">
                <h3>Nike 经典 Air Max 系列</h3>
                <h4>正在热销!<br>最低 ￥500 元起</h4>
                <a class="show" href="/home/list/index?cateid=27">立即购买</a>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!-- instock -->
<div class="featured">
    <div class="container">
        <div class="col-md-9">
            <div class="biseller-info">

                <h3 class="new-models">热门商品</h3>
                <ul id="flexiselDemo3">
                    @foreach($hot as $k=>$v)
                    <li>
                        <div class="biseller-column">
                            <a href="/home/detail/index?id={{$v['id']}}"><i class="new"></i>
                            <img src="/home/images/{{$v['goods_img']}}" class="img-responsive" alt="" class="veiw-img">
                            <div class="biseller-name">
                                <h4>{{$v['goods_name']}}</h4>
                                <p>￥{{$v['goods_price']}}</p>
                            </div>
                            </a>
                        </div>
                    </li>
                    @endforeach

                </ul>

            </div>

            <script type="text/javascript">
                $(window).load(function() {
                    $("#flexiselDemo3").flexisel({
                        visibleItems: 3,
                        animationSpeed: 1000,
                        autoPlay: false,
                        autoPlaySpeed: 3000,
                        pauseOnHover: true,
                        enableResponsiveBreakpoints: true,
                        responsiveBreakpoints: {
                            portrait: {
                                changePoint:480,
                                visibleItems: 1
                            },
                            landscape: {
                                changePoint:640,
                                visibleItems: 2
                            },
                            tablet: {
                                changePoint:768,
                                visibleItems: 3
                            }
                        }
                    });

                });
            </script>
            <script type="text/javascript" src="/home/js/jquery.flexisel.js"></script>

            <div class="best-seller">

                <div class="biseller-info">
                    <h3 class="new-models">最新商品</h3>
                    <ul id="flexiselDemo1">
                        @foreach($new as $k=>$v)
                        <li>
                            <div class="biseller-column">
                                <a href="/home/detail/index?id={{$v['id']}}">
                                    <img src="/home/images/1.jpg" class="img-responsive" alt="">
                                    <i class="new"></i>
                                    <div class="biseller-name">
                                        <h4>{{$v['goods_name']}}</h4>
                                        <p>￥{{$v['goods_price']}}</p>
                                    </div>
                                </a>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>

            </div>
            <script type="text/javascript">
                $(window).load(function() {
                    $("#flexiselDemo1").flexisel({
                        visibleItems: 3,
                        animationSpeed: 1000,
                        autoPlay: true,
                        autoPlaySpeed: 3000,
                        pauseOnHover: true,
                        enableResponsiveBreakpoints: true,
                        responsiveBreakpoints: {
                            portrait: {
                                changePoint:480,
                                visibleItems: 1
                            },
                            landscape: {
                                changePoint:640,
                                visibleItems: 2
                            },
                            tablet: {
                                changePoint:768,
                                visibleItems: 3
                            }
                        }
                    });

                });
            </script>
            <script type="text/javascript">
                $(window).load(function() {
                    $("#flexiselDemo5").flexisel({
                        visibleItems: 3,
                        animationSpeed: 1000,
                        autoPlay: true,
                        autoPlaySpeed: 3000,
                        pauseOnHover: true,
                        enableResponsiveBreakpoints: true,
                        responsiveBreakpoints: {
                            portrait: {
                                changePoint:480,
                                visibleItems: 1
                            },
                            landscape: {
                                changePoint:640,
                                visibleItems: 2
                            },
                            tablet: {
                                changePoint:768,
                                visibleItems: 3
                            }
                        }
                    });

                });
            </script>
            <div class="best-seller">

                <div class="biseller-info">

                    <ul id="flexiselDemo5">
                        <li>
                            <div class="biseller-column1">
                                <img src="/home/images/ss3.jpg" class="img-responsive" alt="">
                                <a href="#"><i class="new"></i></a>
                                <div class="biseller-name">
                                    <h4>Sample Item Title</h4>
                                    <p>$99.99</p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="biseller-column1">
                                <img src="/home/images/ss1.jpg" class="img-responsive" alt="">
                                <a href="#"><i class="new"></i></a>
                                <div class="biseller-name">
                                    <h4>Sample Item Title</h4>
                                    <p>$99.99</p>
                                </div>

                            </div>
                        </li>
                        <li>
                            <div class="biseller-column1">
                                <img src="/home/images/ss2.jpg" class="img-responsive" alt="">
                                <a href="#"><i class="new"></i></a>
                                <div class="biseller-name">
                                    <h4>Sample Item Title</h4>
                                    <p>$99.99</p>
                                </div>

                            </div>
                        </li>

                    </ul>
                </div>

            </div>
            <script type="text/javascript" src="/home/js/jquery.flexisel.js"></script>

            <div class="clearfix"></div>
        </div>
        <div class="col-md-3 span_1_of_right">

            <div class="sellers">
                <h3 class="m_2">热销</h3>
                @foreach($sale  as $k=>$v)
                <div class="best">
                    <div class="icon">
                        <img src="/home/images/{{$v['goods_img']}}" class="img-responsive" alt=""/>
                    </div>
                    <div class="data">
                        <h4><a href="/home/detail/index?id={{$v['id']}}">{{$v['goods_name']}}</a></h4>
                        <p>￥{{$v['goods_price']}}</p>
                        <h5>￥{{$v['goods_price']}}</h5>
                    </div>
                    <div class="clearfix"></div>
                </div>
                @endforeach
            </div>

            <div class="sellers">
                <h3 class="m_2">Tags</h3>
                <div class="tags">
                    <ul>
                        <li><a href="/home/list/index?cateid=27">Air Max 1,</a></li>
                        <li><a href="/home/list/index?cateid=15">NMD,</a></li>
                        <li><a href="/home/list/index?cateid=13">Ultra Boost,</a></li>
                        <li><a href="/home/list/index?cateid=24">Zoom,</a></li>
                        <li><a href="/home/list/index?cateid=17">Superstar,</a></li>
                        <li><a href="/home/list/index?cateid=31">AJ1,</a></li>
                    </ul>
                </div>
            </div>

            <section  class="sky-form">
                <div class="sellers">
                    <h3 class="m_2">精品</h3>
                    <section class="slider">
                        <div class="flexslider">
                            <ul class="slides">
                                @foreach($best as $k=>$v)
                                <li>
                                    <div class="tittle">
                                        <img src="/home/images/{{$v['goods_img']}}" class="img-responsive" alt=""/>
                                        <h6>{{$v['goods_name']}}</h6>
                                        <p>精品热销</p>
                                        <a class="show1" href="/home/detail/index?id={{$v['id']}}">立即购买</a>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </section>

                    <!-- FlexSlider -->
                    <script defer src="/home/js/jquery.flexslider.js"></script>
                    <script type="text/javascript">
                        $(function(){
                            SyntaxHighlighter.all();
                        });
                        $(window).load(function(){
                            $('.flexslider').flexslider({
                                animation: "slide",
                                start: function(slider){
                                    $('body').removeClass('loading');
                                }
                            });
                        });
                    </script>
                </div>
            </section>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
@show
<!-- footer -->
{{--<div class="footer">--}}
    {{--<div class="container">--}}
        {{--<p>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.17sucai.com/">商城模板</a></p>--}}
    {{--</div>--}}
{{--</div>--}}
<!-- footer -->

</body>
</html>
